<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>state</title>
  </head>
  <body>
    <div id="test">我是一段文本</div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">
      class Person extends React.Component {
        constructor(props) {
          // 注意：
          // 构造器中是否接收与传递 props，取决于是否在构造器中通过 this 访问 props
          console.log(props)
          super(props)
          console.log(this.props)
        }

        // 类内部实现私有属性的方式
        static propTypes = {
          name: PropTypes.string.isRequired,
          sex: PropTypes.string,
          age: PropTypes.number,
          speak: PropTypes.func
        }

        static defaultProps = {
          sex: '男'
        }

        render() {
          console.log(this)
          const { name, age, sex } = this.props
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>性别：{sex}</li>
              <li>年龄：{age + 1}</li>
            </ul>
          )
        }
      }

      const pData = { name: 'jerry', age: 18, sex: '女' }
      ReactDOM.render(<Person {...pData} />, document.getElementById('test'))

      // 注意：
      // 类实现私有属性有两种方式：
      // 1. 外部添加 类名.属性
      // 2. 内部添加 static 属性
    </script>

    <!-- 拓展资料 -->
    <script type="text/babel">
      class Car {
        a = 1
      }
      Car.b = 2 // 类本身的私有属性，外部添加

      const C1 = new Car()
      console.log('c1', C1)
      console.log(C1.a)
      console.log(C1.b)
    </script>
  </body>
</html>
